<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>会员列表-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title>
  <meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <link rel="stylesheet" href="../../static/css/font.css" />
  <link rel="stylesheet" href="../../static/css/weadmin.css" />
</head>
<style>
  .black_over {
    /* display: none; */
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000000c7;
    z-index: 999;
    opacity: 0.6;
    filter: alpha(opacity=50);
  }

  .zzc {
    background-color: #fff;
    width: 400px;
    height: 600px;
    overflow: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1000;
  }
</style>

<body>
  <div class="weadmin-nav">
    <span class="layui-breadcrumb">
      <a href="javascript:;">首页</a> <a href="javascript:;">购买大厅管理</a>
      <a href="javascript:;"> <cite>类型管理</cite></a>
    </span>
    <!-- <a class="layui-btn layui-btn-sm" style="margin-top:3px;float:right"
      href="javascript:location.replace(location.href);" title="刷新">
      <i class="layui-icon layui-icon-refresh"></i>
    </a> -->
  </div>

  <div class="weadmin-body" id="app">
    
    <div class="weadmin-block">
      <button class="layui-btn layui-btn-danger" @click="del_all()">
        <i class="layui-icon layui-icon-delete"></i>批量删除
      </button>
      <!-- <button class="layui-btn" onclick="WeAdminShow('添加用户','./add.html',600,400)"> -->
      <button class="layui-btn" @click="add()">
        <i class="layui-icon layui-icon-add-circle-fine"></i>添加
      </button>
      <!-- <span class="fr" style="line-height:40px">共有数据：88 条</span> -->
    </div>
    <table class="layui-table" id="memberList">
      <thead>
        <tr>
          <th>
            <div
              :class="{'layui-unselect':true,'header':true,'layui-form-checkbox':true,'layui-form-checked':check.length==list.length}"
              lay-skin="primary" @click="select_all">
              <i class="layui-icon layui-icon-ok"></i>
            </div>
          </th>
          <th>ID</th>
          <th>类型</th>
          <th>操作</th>
        </tr>
      </thead>
      <!-- 表格主体 -->
      <div v-if="list.length!=0">
        <!-- 0 -->
        <tr>
          <td>
            <div @click="select(0)"
              :class="{'layui-form-checked':check.includes(0),'layui-unselect':true,'layui-form-checkbox':true}"
              lay-skin="primary">
              <i class="layui-icon layui-icon-ok"></i>
            </div>
          </td>
          <td>{{list[0].accountType}}</td>
          <td>{{list[0].typeName}}</td>
          <td class="td-manage">

            <a title="编辑" @click="update_show(0)">
              <i class="layui-icon layui-icon-edit"></i>
            </a>

            <a title="删除" @click="del(0)">
              <i class="layui-icon layui-icon-delete"></i>
            </a>
          </td>
        </tr>
        <!-- 1 -->
        <tr v-if="list.length>1">
          <td>
            <div @click="select(1)"
              :class="{'layui-form-checked':check.includes(1),'layui-unselect':true,'layui-form-checkbox':true}"
              lay-skin="primary">
              <i class="layui-icon layui-icon-ok"></i>
            </div>
          </td>
          <td>{{list[1].accountType}}</td>
          <td>{{list[1].accountType}}</td>
          <td class="td-manage">

            <a title="编辑" href="#" @click="update_show(1)">
              <i class="layui-icon layui-icon-edit"></i>
            </a>

            <a title="删除" href="#" @click="del(1)">
              <i class="layui-icon layui-icon-delete"></i>
            </a>
          </td>
        </tr>
        <!-- 2 -->
        <tr v-if="list.length>2">
          <td>
            <div @click="select(2)"
              :class="{'layui-form-checked':check.includes(2),'layui-unselect':true,'layui-form-checkbox':true}"
              lay-skin="primary">
              <i class="layui-icon layui-icon-ok"></i>
            </div>
          </td>
          <td>{{list[2].accountType}}</td>
          <td>{{list[2].typeName}}</td>
          <td class="td-manage">

            <a title="编辑" href="#" @click="update_show(2)">
              <i class="layui-icon layui-icon-edit"></i>
            </a>

            <a title="删除" href="#" @click="del(2)">
              <i class="layui-icon layui-icon-delete"></i>
            </a>
          </td>
        </tr>
        <!-- 3 -->
        <tr v-if="list.length>3">
          <td>
            <div @click="select(3)"
              :class="{'layui-form-checked':check.includes(3),'layui-unselect':true,'layui-form-checkbox':true}"
              lay-skin="primary">
              <i class="layui-icon layui-icon-ok"></i>
            </div>
          </td>
          <td>{{list[3].accountType}}</td>
          <td>{{list[3].typeName}}</td>
          <td class="td-manage">

            <a title="编辑" href="#" @click="update_show(3)">
              <i class="layui-icon layui-icon-edit"></i>
            </a>

            <a title="删除" href="#" @click="del(3)">
              <i class="layui-icon layui-icon-delete"></i>
            </a>
          </td>
        </tr>
        <!-- 4 -->
        <tr v-if="list.length>4">
          <td>
            <div @click="select(4)"
              :class="{'layui-form-checked':check.includes(4),'layui-unselect':true,'layui-form-checkbox':true}"
              lay-skin="primary">
              <i class="layui-icon layui-icon-ok"></i>
            </div>
          </td>
          <td>{{list[4].accountType}}</td>
          <td>{{list[4].typeName}}</td>
          <td class="td-manage">

            <a title="编辑" href="#" @click="update_show(4)">
              <i class="layui-icon layui-icon-edit"></i>
            </a>

            <a title="删除" href="#" @click="del(4)">
              <i class="layui-icon layui-icon-delete"></i>
            </a>
          </td>
        </tr>
        <!-- 5 -->
        <tr v-if="list.length>5">
          <td>
            <div @click="select(5)"
              :class="{'layui-form-checked':check.includes(5),'layui-unselect':true,'layui-form-checkbox':true}"
              lay-skin="primary">
              <i class="layui-icon layui-icon-ok"></i>
            </div>
          </td>
          <td>{{list[5].accountType}}</td>
          <td>{{list[5].typeName}}</td>
          <td class="td-manage">

            <a title="编辑" href="#" @click="update_show(5)">
              <i class="layui-icon layui-icon-edit"></i>
            </a>

            <a title="删除" href="#" @click="del(5)">
              <i class="layui-icon layui-icon-delete"></i>
            </a>
          </td>
        </tr>
        <!-- 6 -->
        <tr v-if="list.length>6">
          <td>
            <div @click="select(6)"
              :class="{'layui-form-checked':check.includes(6),'layui-unselect':true,'layui-form-checkbox':true}"
              lay-skin="primary">
              <i class="layui-icon layui-icon-ok"></i>
            </div>
          </td>
          <td>{{list[6].accountType}}</td>
          <td>{{list[6].typeName}}</td>
          <td class="td-manage">

            <a title="编辑" href="#" @click="update_show(6)">
              <i class="layui-icon layui-icon-edit"></i>
            </a>

            <a title="删除" href="#" @click="del(6)">
              <i class="layui-icon layui-icon-delete"></i>
            </a>
          </td>
        </tr>
        <!-- 7 -->
        <tr v-if="list.length>7">
          <td>
            <div @click="select(7)"
              :class="{'layui-form-checked':check.includes(7),'layui-unselect':true,'layui-form-checkbox':true}"
              lay-skin="primary">
              <i class="layui-icon layui-icon-ok"></i>
            </div>
          </td>
          <td>{{list[7].accountType}}</td>
          <td>{{list[7].typeName}}</td>
          <td class="td-manage">

            <a title="编辑" href="#" @click="update_show(7)">
              <i class="layui-icon layui-icon-edit"></i>
            </a>

            <a title="删除" href="#" @click="del(7)">
              <i class="layui-icon layui-icon-delete"></i>
            </a>
          </td>
        </tr>
        <!-- 8 -->
        <tr v-if="list.length>8">
          <td>
            <div @click="select(8)"
              :class="{'layui-form-checked':check.includes(8),'layui-unselect':true,'layui-form-checkbox':true}"
              lay-skin="primary">
              <i class="layui-icon layui-icon-ok"></i>
            </div>
          </td>
          <td>{{list[8].accountType}}</td>
          <td>{{list[8].typeName}}</td>
          <td class="td-manage">

            <a title="编辑" href="#" @click="update_show(8)">
              <i class="layui-icon layui-icon-edit"></i>
            </a>

            <a title="删除" href="#" @click="del(8)">
              <i class="layui-icon layui-icon-delete"></i>
            </a>
          </td>
        </tr>
        <!-- 9 -->
        <tr v-if="list.length>9">
          <td>
            <div @click="select(9)"
              :class="{'layui-form-checked':check.includes(9),'layui-unselect':true,'layui-form-checkbox':true}"
              lay-skin="primary">
              <i class="layui-icon layui-icon-ok"></i>
            </div>
          </td>
          <td>{{list[9].accountType}}</td>
          <td>{{list[9].typeName}}</td>
          <td class="td-manage">

            <a title="编辑" href="#" @click="update_show(9)">
              <i class="layui-icon layui-icon-edit"></i>
            </a>

            <a title="删除" href="#" @click="del(9)">
              <i class="layui-icon layui-icon-delete"></i>
            </a>
          </td>
        </tr>

      </div>
    </table>
    <!-- 页数 -->
    <div class="page">
      <div>
        <a class="prev" href="#" @click="add_page">&lt;&lt;上一页</a>
        <!-- <a class="num" href="#">1</a>
        <span class="current">2</span> 
        <a class="num" href="#">...</a>
        <a class="num" href="#">489</a>  -->
        <a class="next" href="#" @click="cut_page">下一页&gt;&gt;</a>
      </div>
    </div>
    <!-- <div>
      <ul>
        <li v-for="(item,index) in list">{{index}}</li>
      </ul>
    </div> -->
    <!-- //遮罩层 -->
    <div class="black_over" v-show="zzc_show"></div>
    <!-- 弹窗 -->
    <div class="zzc" v-show="zzc_show">
      <div class="weadmin-body">
        <!-- <div class="layui-form-item">
          <label for="L_username" class="layui-form-label">
            <span class="we-red">*</span>
          </label>
          <div class="layui-input-inline">
            <select id="type2" class="layui-input layui-unselect">
              <option value="-1">选择类型</option>
              <option v-for="(item,index) in type_list" :selected="select_AccountType==item.accountType"
                :value="item.accountType">{{item.typeName}}</option>
            </select>
          </div>
        </div> -->
        <!-- <form class="layui-form"> -->


        <div class="layui-form-item">
          <label for="L_username" class="layui-form-label">
            <span class="we-red">*</span>名称
          </label>
          <div class="layui-input-inline">
            <input type="text" id="L_username" name="username" lay-verify="required|nikename" autocomplete="off"
              class="layui-input" v-model="typeName">
          </div>
        </div>

        <!-- 3 -->
        <div class="layui-form-item">
          <label for="L_repass" class="layui-form-label">
          </label>
          <button class="layui-btn" @click="add_form">确定</button>
          <button class="layui-btn" @click="close()">取消</button>
        </div>
        <!-- </form> -->
      </div>
    </div>

  </div>
  <script src="../../lib/layui/layui.js" type="text/javascript"></script>
  <script src="../../static/js/eleDel.js" type="text/javascript"></script>
  <script src="../../lib/vue.min.js"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
  <script src="../../lib/jquery-3.4.1.min.js"></script>
  <!-- <script src="../public/libs/vant.js"></script> -->
  <script src="../../lib/app.js"></script>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        zzc_show: false,//遮罩层
        list: [],
        check: [],//已选
        page: 1,//当前页数
        page_size: 10,
        pages: 1,//总页数
        type: "",//搜索类型
        type2: "",//添加修改类型
        type_list: [],
        // 添加数据
        typeName: "",
        numberDays: "",
        AccountType: "",
        buyid: "",//当前修改id
        // 修改数据框显示
        select_AccountType: -1,//下拉
        buttontype: "",//确定按钮类型 add update
      },
      methods: {
        //获取类型
        get_type: function () {
          $.ajax({
            url: app.webUrl + '/backstage/selType',
            type: 'get',
            data: {},
            success: function (ret) {
              if (ret.status == 1) {
                vm.type_list = ret.data;
              } else {

              }
            }
          });
        },
        //获取列表
        get_page: function () {
          var data = {
            pageNum: this.page,
            pageSize: this.page_size
            // type:this.type
          }
          if (this.type != -1) {
            data.type = this.type
          }
          $.ajax({
            url: app.webUrl + '/backstage/selTypePage',
            type: 'get',
            data: data,
            success: function (ret) {
              if (ret.status == 1) {
                vm.list = ret.data.list;
                console.log(vm.list);
                vm.pages = ret.data.pages;
                vm.page++
              } else {

              }
            }
          });
        },
        //删除
        del: function (index) {
          var AccountType = this.list[index].accountType;
          layer.confirm('确定删除吗', {
            btn: ['确定', '取消'] //可以无限个按钮
            , btn2: function (index, layero) {
              // console.log(2);
            }
          }, function (index, layero) {
            //按钮【按钮一】的回调
            $.ajax({
              url: app.webUrl + '/backstage/delType',
              type: 'get',
              data: { AccountType: AccountType },
              success: function (ret) {
                if (ret.status == 1) {
                  layer.msg('删除成功', { icon: 1 });
                  vm.page = 1;
                  vm.get_page();
                } else {

                }
              }
            });
          });

        },
        //批量删除
        del_all: function () {
          // console.log(this.check);
          var data = []
          this.check.forEach(element => {
            // console.log(element);
            data.push(vm.list[element].accountType)
          });
          var check = JSON.stringify(data)
          console.log(check);
          layer.confirm('确定删除吗', {
            btn: ['确定', '取消'] //可以无限个按钮
            , btn2: function (index, layero) {
              // console.log(2);
            }
          }, function (index, layero) {
            //按钮【按钮一】的回调
            $.ajax({
              url: app.webUrl + '/backstage/delTypeAll',
              type: 'get',
              data: { AccountType: check },
              success: function (ret) {
                if (ret.status == 1) {
                  layer.msg('删除成功', { icon: 1 });
                  vm.page = 1;
                  vm.get_page();
                } else {

                }
              }
            });
          });
        },

        //选择全部
        select_all: function () {
          if (this.check.length == 0) {
            var len = this.check.length;
            this.check = [];
            for (var i = 0; i < this.list.length; i++) {
              this.check.push(i);
            }
          } else {
            this.check = [];
          }
          // console.log(this.check.length);
        },
        //选择
        select: function (index) {
          var idx = this.check.indexOf(index);
          // console.log(idx);
          //如果已经选中了，那就取消选中，如果没有，则选中
          if (idx != -1) {
            this.check.splice(idx, 1);
          } else {
            this.check.push(index);
          }
        },
        //关闭弹窗
        close: function () {
          console.log(1);
          this.zzc_show = false;
        },
        // 添加弹窗
        add: function () {
          this.buttontype = "add";
          this.zzc_show = true;

        },
        //添加 或者修改提交
        add_form: function () {
          // var type2 = document.getElementById("type2").value;
          // // console.log(type2);
          // if (type2 == (-1)) {
          //   layer.msg('请选择类型', { icon: 1 });
          //   return
          // }
          if (this.typeName == "") {
            layer.msg('请输入名称', { icon: 1 });
            return
          }
          // if (this.numberDays == "") {
          //   layer.msg('请输入天数', { icon: 1 });
          //   return
          // }
          // console.log(type2);
          var data = {
            typeName: this.typeName,
            // numberDays: this.numberDays,
            // price: this.price
          }
          var url = ""
          if (this.buttontype == "add") {

            url = "/backstage/intsetType"
          } else {
            data.AccountType = this.AccountType
            console.log(this.AccountType);
            url = "/backstage/updateType"
          }
          // var data = {
          //   AccountType: type2,
          //   numberDays: this.numberDays,
          //   price: this.price
          // }
          $.ajax({
            url: app.webUrl + url,
            type: 'get',
            data: data,
            success: function (ret) {
              if (ret.status == 1) {
                layer.msg('操作成功', {
                  icon: 1
                });
                vm.page = 1;
                vm.get_page();
                vm.close();

              } else {

              }
            }
          });

        },
        //修改
        update_show: function (index) {
          this.typeName = this.list[index].typeName;
          this.AccountType = this.list[index].accountType;
          //显示
          this.zzc_show = true;
          this.buttontype = "update";

        },
        // 修改提交
        update_form: function () {

        },
        //搜索
        search: function () {
          var type = document.getElementById("type").value;
          console.log(type);
          this.page = 1;
          this.type = type;
          this.get_page();

        },
        //上一页
        add_page: function () {
          // console.log(this.page);
          if (this.page <= 2) {
            layer.msg('已经到头了', {
              icon: 2
            });
          } else {
            this.page = this.page - 2;
            this.get_page();
          }
        },
        //下一页
        cut_page: function () {
          if (this.page > this.pages) {
            layer.msg('已经到头了', {
              icon: 2
            });
          } else {
            // this.page++
            this.get_page();
          }
        }

      },
      mounted: function () {
        this.get_page();
        // this.get_type();
      },


    })

  </script>
</body>

</html>